<style lang="less">
@import "./adManage.less";
</style>
<template>
  <div>
    <div class="search" id="adManagePage" v-show="adManagePageVisible">
        <Row>
            <Col>
                <Card>
                    <Row>
                        <Form ref="searchForm" :model="searchForm" inline :label-width="90" class="search-form">
                            <Form-item label="名称" prop="title" >
                              <Input type="text" v-model="searchForm.title" clearable placeholder="请输入文章名称" style="width: 200px;" />
                            </Form-item>
                            <!-- <Form-item label="作者" prop="author" >
                              <Input type="text" v-model="searchForm.author" clearable placeholder="请输入作者名称" style="width: 200px;"/>
                            </Form-item> -->
                            <Form-item label="类型" prop="status">
                              <Select v-model="searchForm.status" placeholder="请选择" clearable style="width: 200px">
                                <Option value="1">banner</Option>
                                <Option value="2">topic</Option>
                              </Select>
                            </Form-item>
                            <!-- <span v-if="drop"></span> -->
                            <Form-item style="margin-left:-35px;">
                              <Button @click="handleSearch" type="primary" icon="search">搜索</Button>
                              <Button @click="handleReset" type="ghost" >重置</Button>
                              <!-- <a class="drop-down" @click="dropDown">{{dropDownContent}}
                                <Icon :type="dropDownIcon"></Icon>
                              </a> -->
                            </Form-item>
                        </Form>
                    </Row>
                    <Row class="operation">
                        <Button @click="addAd" type="primary" icon="plus-round">添加广告</Button>
                        <Button @click="delAll" type="ghost" icon="trash-a">批量删除</Button>
                        <Dropdown @on-click="handleDropdown">
                          <Button type="ghost">
                              更多操作
                              <Icon type="arrow-down-b"></Icon>
                          </Button>
                          <DropdownMenu slot="list">
                              <DropdownItem name="refresh">刷新</DropdownItem>
                              <DropdownItem name="exportData">导出所选数据</DropdownItem>
                          </DropdownMenu>
                        </Dropdown>
                    </Row>
                    <Row>
                        <Alert show-icon>
                            已选择 <span class="select-count">{{selectCount}}</span> 项
                            <a class="select-clear" @click="clearSelectAll">清空</a>
                        </Alert>
                    </Row>
                    <Row class="margin-top-10 searchable-table-con1">
                        <Table :loading="loading" border :columns="columns" :data="data" sortable="custom" @on-sort-change="changeSort" @on-selection-change="showSelect" ref="table"></Table>
                        <Table :columns="columns" :data="exportData" ref="exportTable" style="display:none"></Table>
                    </Row>
                    <Row type="flex" justify="end" class="code-row-bg page">
                        <Page :current="this.articleForm.pageNumber" :total="total" :page-size="this.articleForm.pageSize" @on-change="changePage" @on-page-size-change="changePageSize" :page-size-opts="[10,20,50,100]" size="small" show-total show-elevator show-sizer></Page>
                    </Row>
                </Card>
            </Col>
        </Row>
    </div>

    <div class="search" id="adDetailPage" v-show="adDetailPageVisible" style="background-color:white;padding:20px;">
      <ad-detail ref="adDetailComp" @on-ad-cancel="adDetailCancel" @on-ad-success="adSubmitSuccess"></ad-detail>
      <!-- <comm-product ref="commProductDetailComp" @on-commproduct-cancel="commProductDetailCancel" @on-commproduct-success="commProductSubmitSuccess"></comm-product> -->
    </div> 

    <review-modal ref="articleReviewModal" @on-review-success="reviewSuccess"></review-modal>

    <Modal title="原图展示" v-model="visible" footer-hide>
      <img :src="viewImageUrl" v-if="visible" style="width: 100%">
    </Modal>

  </div>  
</template>

<script>

import dateFormatUtil from "@/utils/dateFormatUtil";
import { imageRemoteUrl } from "@/utils/imageConstant";

import AdDetail from "./adDetail.vue";
import ReviewModal from "../../comm-comp/reviewModalComp.vue"

export default {
  name: "ad-manage",
  components: {
    AdDetail,
    ReviewModal
  },
  data() {
    return {
      loading: true,
      drop: false,
      dropDownContent: "展开",
      dropDownIcon: "chevron-down",
      selectCount: 0,
      selectList: [],
      searchForm: {
        itemName: "",
        supplierId: "",
        itemPrice: "",
        status: ""
      },
      modalType: 0,
      modalTitle: "",
      articleForm: {
        status:0
      },
      errorPass: "",
      submitLoading: false,

      visible: false,
      viewImageUrl: null, 
      imageBaseUrl: '',

      columns: [
        {
          type: "selection",
          width: 60,
          align: "center"
        },
        {
          title: "名称",
          key: "adName",
          width: 200,
          sortable: true
        },
        {
          title: "类型",
          key: "mediaType",
          width: 120,
          sortable: true
        },
        {
          title: "图片",
          key: "piclist",
          width: 120,
          sortable: true,
          align: "center",
          render: (h, params) => {
            if (params.row) {
              let imgRemote = this.imageBaseUrl + params.row.piclist;
              return h("img", {
                attrs:{
                  src: imgRemote
                },
                style: {
                  width: '100px',
                  height: '50px',
                  cursor: 'pointer'
                },
                on: {
　　　　　　　　　  click: (e) => {
                    var currentPicImgUrl = e.target.currentSrc;
                    this.handleImgView(currentPicImgUrl)
　　　　　　　　　　}
　　　　　　　　  }
              });
            }
          }
        },
        {
          title: "开始时间",
          key: "startTime",
          width: 120,
          sortable: true
        },
        {
          title: "结束时间",
          key: "endTime",
          width: 120,
          sortable: true
        },
        {
          title: "点击次数",
          key: "clickCount",
          width: 120,
          sortable: true
        }, 
        {
          title: "开启状态",
          key: "enabled",
          align: "center",
          width: 150,
          render: (h, params) => {
            let re = "";
            if (params.row.enabled === 0) {
              return h("div", [
                h(
                  "Tag",
                  {
                    props: {
                      type: "dot",
                      color: "red"
                    }
                  },
                  "关闭"
                )
              ]);
            } else if (params.row.enabled === 1) {
              return h("div", [
                h(
                  "Tag",
                  {
                    props: {
                      type: "dot",
                      color: "green"
                    }
                  },
                  "开启"
                )
              ]);
            }
          },
          filters: [
            {
              label: "关闭",
              value: 0
            },
            {
              label: "通过开启",
              value: 1
            }
          ],
          filterMultiple: false,
          filterMethod(value, row) {
            if (value === 0) {
              return row.enabled === 0;
            } else if (value === 1) {
              return row.enabled === 1;
            }
          }
        },
        {
          title: "创建时间",
          key: "createTime",
          sortable: true,
          sortType: "desc",
          width: 150
        },
        {
          title: "操作",
          key: "action",
          width: 340,
          align: "center",
          render: (h, params) => {
            if (params.row.enabled === 0) {
              return h("div", [
                h(
                  "Button",
                  {
                    props: {
                      type: "primary",
                      size: "small"
                    },
                    style: {
                      marginRight: "5px"
                    },
                    on: {
                      click: () => {
                        this.edit(params.row);
                      }
                    }
                  },
                  "编辑"
                ),
                h(
                  "Button",
                  {
                    props: {
                      type: "info",
                      size: "small"
                    },
                    style: {
                      marginRight: "5px"
                    },
                    on: {
                      click: () => {
                        this.open(params.row);
                      }
                    }
                  },
                  "开启"
                ),
                h(
                  "Button",
                  {
                    props: {
                      type: "error",
                      size: "small"
                    },
                    on: {
                      click: () => {
                        this.remove(params.row);
                      }
                    }
                  },
                  "删除"
                )
              ]);
            } else {
              return h("div", [
                h(
                  "Button",
                  {
                    props: {
                      type: "primary",
                      size: "small"
                    },
                    style: {
                      marginRight: "5px"
                    },
                    on: {
                      click: () => {
                        this.edit(params.row);
                      }
                    }
                  },
                  "编辑"
                ),
                h(
                  "Button",
                  {
                    props: {
                      type: "info",
                      size: "small"
                    },
                    style: {
                      marginRight: "5px"
                    },
                    on: {
                      click: () => {
                        this.close(params.row);
                      }
                    }
                  },
                  "关闭"
                ),
                h(
                  "Button",
                  {
                    props: {
                      type: "error",
                      size: "small"
                    },
                    on: {
                      click: () => {
                        this.remove(params.row);
                      }
                    }
                  },
                  "删除"
                )
              ]);
            }
          }
        }
      ],
      data: [],
      exportData: [],
      total: 0,
      adManagePageVisible: true,
      adDetailPageVisible: false
    };
  },
  methods: {
    init() {
      this.getAdList();
      this.cleanSelectCount();
    },
    changePage(v) {
      this.searchForm.pageNumber = v;
      this.getAdList();
    },
    changePageSize(v) {
      this.searchForm.pageSize = v;
      this.getAdList();
    },
    getAdList() {
      this.loading = true;      
      this.getRequest("/advertisement/list", this.searchForm).then(res => {  
        this.loading = false;
        if (res.success === true) {
          this.data = res.result.content;
          this.total = res.result.totalElements;
        }
      });
    },
    handleSearch() {
      this.searchForm.pageNumber = 1;
      this.searchForm.pageSize = 10;
      this.init();
    },
    handleReset() {
      this.$refs.searchForm.resetFields();
      this.searchForm.pageNumber = 1;
      this.searchForm.pageSize = 10;
      // 重新加载数据
      this.init();
    },
    changeSort(e) {
      this.searchForm.sort = e.key;
      this.searchForm.order = e.order;
      if (e.order === "normal") {
        this.searchForm.order = "";
      }
      this.init();
    },
    handleDropdown(name) {
      if (name === "exportData") {
        if (this.selectCount <= 0) {
          this.$Message.warning("您还未选择要导出的数据");
          return;
        }
        this.$Modal.confirm({
          title: "确认导出",
          content: "您确认要导出所选 " + this.selectCount + " 条数据?",
          onOk: () => {
            this.$refs.exportTable.exportCsv({
              filename: "用户数据"
            });
          }
        });
      } else if (name === "refresh") {
        this.getAdList();
      }
    },

    handleImgView(currentPicImgUrl) {
      this.visible = true;
      this.viewImageUrl = currentPicImgUrl;
    },
    
    addAd(v) {
      // this.modalType = 0;
      // this.modalTitle = "添加会员";
      // this.$refs.articleForm.resetFields();
      // for (let attr in this.articleForm) {
      //   if (this.articleForm[attr] == null) {
      //     this.articleForm[attr] = "";
      //   }
      // }
      // this.goodsModalVisible = true;
      // this.$router.push({
      //   name: "specialty-detail"
      // });
      // this.$refs.lineview.initData(this.currentSupplierId);

      this.$refs.adDetailComp.resetFormByType(0,null);

      //切换界面显示隐藏
      this.adManagePageVisible = false;
      this.adDetailPageVisible = true;
    },
    adDetailCancel:function(v){
      if(v){
        this.adManagePageVisible = true;
        this.adDetailPageVisible = false;
      }
    },
    adSubmitSuccess: function(v){
      console.log("================commProductSubmitSuccess==================")
      if(v){
        this.adManagePageVisible = true;
        this.adDetailPageVisible = false;
        this.getAdList();
      }
    },
    edit(v) {
      let editAdId = v.id;
      this.loading = true; 
      this.getRequest("/advertisement/getAdvertisementById/" + editAdId).then(res =>{
        this.loading = false;
        console.log(res.result);
        let updateAd = res.result;

        this.$refs.adDetailComp.resetFormByType(1, updateAd);
        //切换界面显示隐藏
        this.adManagePageVisible = false;
        this.adDetailPageVisible = true;
      }).catch(err => {
        console.log(err);
        console.log("============请求超时===============");

      })
    },
    
    open(v) {
      this.$Modal.confirm({
        title: "确认开启",
        content: "您确认要开启广告 " + v.adName + " ?",
        onOk: () => {
          this.putRequest("/advertisement/open", {id:v.id}).then(res => {
            if (res.success === true) {
              this.$Message.success("操作成功");
              this.init();
            }
          });
        }
      });
    },
    close(v) {
      this.$Modal.confirm({
        title: "确认关闭",
        content: "您确认要关闭广告 " + v.adName + " ?",
        onOk: () => {
          this.putRequest("/advertisement/close", {id:v.id}).then(res => {
            if (res.success === true) {
              this.$Message.success("操作成功");
              this.init();
            }
          });
        }
      });
    },
    
    review(v) {
      let reviewObj={
        reviewId: v.id,
        title: "文章审核",
        status: v.status+'',
        reason: v.reason
      }
      let reviewUrl = "/article/review";
      this.$refs.articleReviewModal.openReviewModal(true,reviewUrl,reviewObj);
    },
    reviewSuccess:function(v){
      if(v){
        this.getAdList();
      }
    },


    remove(v) {
      this.$Modal.confirm({
        title: "确认删除",
        content: "您确认要删除广告 " + v.adName + " ?",
        onOk: () => {
          this.deleteRequest("/advertisement/delete/" + v.id).then(res => {
            if (res.success === true) {
              this.$Message.success("删除成功");
              this.init();
            }
          });
        }
      });
    },
    dropDown() {
      if (this.drop) {
        this.dropDownContent = "展开";
        this.dropDownIcon = "chevron-down";
      } else {
        this.dropDownContent = "收起";
        this.dropDownIcon = "chevron-up";
      }
      this.drop = !this.drop;
    },
    showSelect(e) {
      this.exportData = e;
      this.selectList = e;
      this.selectCount = e.length;
    },
    clearSelectAll() {
      this.$refs.table.selectAll(false);
      this.cleanSelectCount();
    },
    cleanSelectCount(){
      this.selectCount = 0;
    },
    delAll() {
      if (this.selectCount <= 0) {
        this.$Message.warning("您还未选择要删除的数据");
        return;
      }
      this.$Modal.confirm({
        title: "确认删除",
        content: "您确认要删除所选的 " + this.selectCount + " 条数据?",
        onOk: () => {
          let ids = "";
          this.selectList.forEach(function(e) {
            ids += e.id + ",";
          });
          ids = ids.substring(0, ids.length - 1);
          this.deleteRequest("/article/delete/" + ids).then(res => {
            if (res.success === true) {
              this.$Message.success("删除成功");
              this.init();
            }
          });
        }
      });
    }
  },
  mounted() {
    console.log("============mounted==========");
    this.imageBaseUrl = imageRemoteUrl.imageBaseUrl
    this.init();
  }
};
</script>